<template>
    <div class="learnmore" :style="learnmoreStyle" @click="tp()">
       <div class="learnmoretext" :style="border" @mouseenter="StyleOn" @mouseleave="StyleOff">
          <div class="textbottom" ref="textbottom" :style="bottomStyle"></div>
          <slot></slot>
          <div class="learnmoreimg">
              <img class="learnmoreicon" ref="learnmoreicon" src="@/assets/img/home/content/right.svg">
          </div>
       </div>
    </div>
</template>

<script>
import Bus from "@/assets/js/bus.js"

export default {
    name:'learnmore',
    data() {
        return {
            property: 'value',
        };
    },
    methods:{
        StyleOn(){
            this.$refs.textbottom.style.width=`${this.width}px`
            this.$refs.learnmoreicon.style.filter=`drop-shadow(-30px 0px ${this.fontcolor})`
        },
        StyleOff(){
            this.$refs.textbottom.style.width="0px"
        },
        tp(){
            this.$router.replace(
			   {
				path:this.path,
				}
			);
            this.$store.commit({
				type: 'updatalocation',
				location:this.path,
			});
			this.$store.commit({
				type: 'updatapageindex',
				pageindex:this.$store.state.pageinfo.location.length
			});
			Bus.$emit('routerchange',this.path);        
        }
    },
    props:{
        fontcolor:{
            type:String,
            default:"white"
        },
        fontsize:{
            type:Number,
            default:1
        },
        width:{
            type:Number,
            default:300
        },
        pdleft:{
            type:Number,
            default:40,
        },
        path:{
            type:String,
        },
        noactivecolor:{
            type:String,
            default:"gray"
        }
    },
    computed:{
        learnmoreStyle(){
            return{
                color:this.fontcolor,
                fontSize:`${this.fontsize}rem`,
                width:`${this.width}px`,
                paddingLeft:`${this.pdleft}px`,
            }
        },
        bottomStyle(){
            return{
                backgroundColor:this.fontcolor
            }
        },
        border(){
            return{
                borderBottom:`2px soild ${this.noactivecolor}`,
            }
        }
    }
}
</script>

<style scoped>
   .learnmore{
       font-weight: bold;
       padding: 10px;
       cursor: pointer;
   }
   .learnmoretext{
       padding-bottom: 10px;
       position: relative;
       display: flex;
       align-items: center; 
       letter-spacing: .1rem;
   }
   .textbottom{
       height: 2px;
       transition: all .3S ease;
       width: 0px;
       position: absolute;
       bottom: -2px;
   }
   .learnmoreimg{
       width: 30px;
       height: 20px;
       overflow: hidden;
       transition: all .3s ease;
       
   }
   .learnmoretext:hover .learnmoreimg{
       text-indent: 30px;
   }
   .learnmoreimg img{
       width: 20px;
       margin-left: 10px;
   }
</style>